<template>
	<view>
		<!-- 用户列表 -->
		<u-list>
			<u-list-item v-for="(user, index) in userList" :key="index" @click.native="viewProfile(user)">
				<view class="user-item">
					<view class="user-item-info">
						<u-avatar :src="user.avatar" size="40"></u-avatar>
						<view>
							<view class="nice">{{user.name}}</view>
							<view class="text">招亲信息还有*天截止</view>
						</view>
					</view>
					<view class="action-icon">
						<u-icon name="arrow-right" @click.stop="toggleFollow(user)" size="18"></u-icon>
					</view>
				</view>
			</u-list-item>
		</u-list>
		<!-- 个人资料 -->
		<userInfoPopup v-if="showProfile" :showProfile="showProfile" :selectedUser="selectedUser" @qxgzEmit="qxgzEmit"
			@closePopup="showProfile = false" />
	</view>
</template>
<script>
	import userInfoPopup from '@/components/Discover/userInfoPopup.vue'
	export default {
		components: {
			// 个人资料弹框
			userInfoPopup
		},
		data() {
			return {
				userList: [{
						id: 1,
						name: '用户A',
						avatar: 'https://example.com/avatar1.jpg',
						updateTime: '2023-10-01 12:00',
						isFollowed: true,
						description: '我是一个热爱生活的人。',
						gender: 'female', // 性别：female 或 male
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户B',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					},
					{
						id: 2,
						name: '用户333',
						avatar: 'https://example.com/avatar2.jpg',
						updateTime: '2023-10-02 14:00',
						isFollowed: true,
						description: '喜欢旅行和美食。',
						gender: 'male',
					}
					// 更多用户...
				],
				showProfile: false, // 是否显示个人资料弹窗
				selectedUser: {}, // 当前选中的用户
				showFeeModal: false, // 是否显示资费提示弹窗
				feeTitle: '', // 资费提示标题
				feeContent: '', // 资费提示内容
			};
		},
		methods: {
			// 查看个人资料
			viewProfile(user) {
				this.selectedUser = user;
				this.showProfile = true;
			},
			// 关注/取消关注
			toggleFollow(user) {
				// event.stopPropagation()
				user.isFollowed = !user.isFollowed;
				this.$u.toast(user.isFollowed ? '关注成功' : '已取消关注');
			},
			// 处理报名
			handleSignUp() {
				if (this.selectedUser.gender === 'female') {
					this.feeTitle = '报名提示';
					this.feeContent = '女生报名免费，是否确认报名？';
				} else {
					this.feeTitle = '报名提示';
					this.feeContent = '男生报名需支付 19.9 元，是否确认报名？';
				}
				this.showFeeModal = true;
			},
			// 处理支付
			handlePayment() {
				this.$u.toast(' 报名成功！');
				this.showFeeModal = false;
				this.showProfile = false;
			},
			// 弹框修改是否关注
			qxgzEmit() {
				this.userList = this.userList.map(item => {
					if (item['id'] == this.selectedUser['id']) {
						item['isFollowed'] = !item['isFollowed']
					}
					return item
				})
			}
		},
		// 按更新时间排序
		created() {
			this.userList.sort((a, b) => new Date(b.updateTime) - new Date(a.updateTime));
		},
	};
</script>
<style lang="scss" scoped>
	/* 列表容器样式 */
	.u-list {
		padding: 0;
		background-color: #f8f8f8;
	}

	/* 列表项样式 */
	.u-list-item {
		padding: 20rpx 30rpx;
		margin: 10rpx 20rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
		transition: all 0.2s ease;
	}

	.u-list-item:active {
		background-color: #f5f5f5;
		transform: scale(0.99);
	}

	.user-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1px dashed #eee;

		.user-item-info {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.nice {
				font-size: 1.2em;
			}

			.text {
				font-size: .8em;
				color: red;
			}
		}

		.action-icon {
			display: flex;

			>* {
				flex: 1;
			}
		}
	}
	.user-item:last-child {
		border: none;
	}

	/* 用户信息样式 */
	.user-info {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.user-info text:first-child {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 6rpx;
	}

	.update-time {
		font-size: 24rpx;
		color: #999;
	}

	/* 关注按钮样式 */
	.u-button {
		margin-left: auto;
		min-width: 120rpx;
	}

	/* 个人资料相关样式 */
	.profile-content {
		padding: 40rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.profile-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-top: 20rpx;
		color: #333;
	}

	.profile-desc {
		font-size: 28rpx;
		color: #666;
		margin: 20rpx 0;
		line-height: 1.6;
	}
</style>